<template>
  <el-scrollbar>
    <div id="scoreLine" class="main">
      <div class="search-box">
        <el-popover
          placement="bottom"
          trigger="click"
          :visible="popperVis"
          popper-class="popoverStyle"
        >
          <template #reference>
            <el-input
              @focus="handleFocus"
              @blur="handleBlur"
              @input="handleInputChange"
              size="large"
              clearable
              :prefix-icon="Search"
              v-model="searchvalue"
              style="width: 100%"
              placeholder="请输入院校关键词..."
            >
            </el-input>
          </template>
          <el-scrollbar>
            <div class="popper-box">
              <div
                class="title-box df curr"
                v-for="item in collegeSearchData"
                :key="item.code"
                @click="handleChecked(item)"
              >
                <div class="df">
                  <div class="college-code">{{ item.code }}</div>
                  <div>{{ item.cnName }}</div>
                </div>
                <div class="check-btn">选择</div>
              </div>
            </div>
          </el-scrollbar>
        </el-popover>
      </div>
      <!-- <noIsVIP v-else></noIsVIP> -->
      <div class="content" v-show="isShow">
        <div>
          <img src="@/assets/images/chuantong.jpg" alt="" />
        </div>
      </div>

      <div v-show="!isShow">
        <div class="college-info df" style="justify-content: space-between">
          <div class="df" style="margin: 20px 0">
            <div class="img-box"><img :src="collegeInfo.logoUrl" alt="" /></div>
            <div>
              <div>{{ collegeInfo.cnName }}</div>
              <div style="margin: 5px 0">
                <el-tag
                  v-for="item in collegeInfo.features"
                  :key="item"
                  type="info"
                  size="small"
                  effect="plain"
                  style="margin-right: 3px"
                >
                  {{ item }}
                </el-tag>
              </div>
              <div class="f12" style="color: #666">
                {{ collegeInfo.provinceName }}{{ collegeInfo.cityName }} /
                {{ categories }} / {{ collegeInfo.belong }}
              </div>
            </div>
          </div>
          <div class="df">
            <div class="f12" style="color: #666; margin-right: 50px">
              <div>热度</div>
              <div>{{ (collegeInfo.hits / 10000).toFixed(1) }}万</div>
            </div>
            <div
              class="df my-btn curr"
              style="justify-content: center"
              @click="handlComparison"
            >
              <div
                :class="{ isActive: isSelected }"
                style="width: 100%; text-align: center"
              >
                <el-icon
                  size="12"
                  style="margin-right: 8px"
                  v-show="!isSelected"
                >
                  <Plus />
                </el-icon>
                {{ isSelected ? '已加入' : '对比' }}
              </div>
            </div>
          </div>
        </div>

        <!-- 院校分数线 -->
        <div>
          <div class="df" style="height: 25px">
            <div
              style="
                width: 4px;
                height: 100%;
                background: var(--background-color);
                margin-right: 5px;
              "
            ></div>
            <div class="font-weight-bold">院校分数线</div>
          </div>
          <div class="table-box" v-loading="tableLoading">
            <div v-for="(item, index) in yearLineTableData" :key="index">
              <div style="margin: 20px 0 10px 0">
                <el-select
                  v-model="selecttextDX5[index]"
                  placeholder=" "
                  style="width: 100px"
                >
                  <el-option
                    v-for="(items, idx) in popArrDX5[index]"
                    :key="`${items}-${idx}`"
                    :label="items"
                    :value="items"
                  />
                </el-select>
              </div>
              <div v-for="(tables, i) in item.courses" :key="i">
                <!-- v-show="tables.name == value" -->
                <el-table
                  v-show="tables.name == selecttextDX5[index]"
                  border
                  :header-cell-style="{
                    backgroundColor: '#f6f6f6',
                    height: '34px',
                    color: '#666',
                  }"
                  :data="tables.fractions"
                  style="width: 100%"
                  empty-text="暂无数据"
                >
                  <el-table-column
                    prop="year"
                    label="年份"
                    width="100"
                    align="center"
                  />
                  <el-table-column
                    prop="collegeNameText"
                    label="院校(招生方向)"
                    width="400"
                  />
                  <el-table-column
                    prop="batch"
                    label="批次/段"
                    align="center"
                  />
                  <el-table-column
                    prop="chooseSubjectText"
                    label="选考要求"
                    align="center"
                  >
                    <template #default="scope">
                      {{ scope.row.chooseSubjectText }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="enterNum"
                    label="录取数"
                    align="center"
                  />
                  <el-table-column
                    prop="maxScore"
                    label="最高分"
                    align="center"
                  />
                  <el-table-column
                    prop="minScore"
                    label="最低分"
                    align="center"
                  />
                  <el-table-column
                    prop="avgScore"
                    label="平均分"
                    align="center"
                  />
                  <el-table-column
                    prop="minRank"
                    label="最低位次"
                    align="center"
                  />
                </el-table>
              </div>
            </div>
          </div>
        </div>

        <!-- 专业分数线 -->
        <div style="margin-top: 20px" v-if="isVIP != 0">
          <div class="df" style="height: 25px">
            <div
              style="
                width: 4px;
                height: 100%;
                background: var(--background-color);
                margin-right: 5px;
              "
            ></div>
            <div class="font-weight-bold">专业分数线</div>
          </div>
          <div class="select-box" style="margin: 20px 0">
            <el-select
              no-data-text="暂无数据"
              v-model="selecttextDX6"
              placeholder=" "
              @change="yearChange"
              style="width: 90px"
            >
              <el-option
                v-for="item in popArrDX6"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>

            <el-select
              no-data-text="暂无数据"
              @change="subjectChange"
              v-model="selecttextDX7"
              placeholder=" "
              style="width: 90px; margin: 0 10px"
            >
              <el-option
                v-for="item in popArrDX7"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>

            <el-select
              no-data-text="暂无数据"
              v-model="selecttextDX8"
              placeholder=" "
              @change="levelChange"
              style="width: 90px"
            >
              <el-option
                v-for="item in popArrDX8"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
          <el-table
            v-loading="majorLoading"
            border
            :header-cell-style="{
              backgroundColor: '#f6f6f6',
              height: '34px',
              color: '#666',
            }"
            :data="planList"
            style="width: 100%"
            empty-text="暂无数据"
          >
            <el-table-column
              prop="year"
              label="年份"
              width="100"
              align="center"
            />
            <el-table-column prop="professionName" label="专业名称" width="400">
              <template #default="scope">
                <div v-if="scope.row.dataType == 'c'">
                  <div class="f16">
                    <span style="margin-right: 10px">{{
                      scope.row.collegeCode
                    }}</span
                    ><span>{{ scope.row.collegeName }}</span>
                  </div>
                  <div>
                    {{ scope.row.collegeNameText }}(专业数{{
                      scope.row.professionNum
                    }})
                  </div>
                </div>
                <div v-else>
                  {{ scope.row.professionName || '-' }}
                  <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="enterNum" label="选科" align="center">
              <template #default="scope">
                {{ scope.row.chooseSubjectText || '不限' }}
              </template>
            </el-table-column>
            <el-table-column prop="enterNum" label="录取数" align="center">
              <template #default="scope">
                {{ scope.row.enterNum || scope.row.uEnterNum || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="maxScore" label="最高分" align="center">
              <template #default="scope">
                {{ scope.row.maxScore || scope.row.uMaxScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="minScore" label="最低分" align="center">
              <template #default="scope">
                {{ scope.row.minScore || scope.row.uMinScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="avgScore" label="平均分" align="center">
              <template #default="scope">
                {{ scope.row.avgScore || scope.row.uAvgScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="minRank" label="最低位次" align="center">
              <template #default="scope">
                {{ scope.row.minRank || scope.row.uMinRank || '-' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <tipsCard :tipsData="tipsData" :type="true" />
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { computed, nextTick, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import tipsCard from '@/components/TipsCard';

import {
  getSchoolYearline,
  getSchoolHome,
  getSchoolScoreline,
  getSchoolScorelineFilter,
  noteDesc,
} from '@/api/scoreline/scoreline';
import { getLikeList, getLikeSave } from '@/api/searchColleges/searchCollege';
import { getSearchSchool } from '@/api/searchColleges/searchCollege';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import _ from 'lodash';

const popperVis = ref(false);
const tableLoading = ref(false);
const searchvalue = ref('');
const isShow = ref(true);

const yearLineTableData = ref([]);
const collegeInfo = ref({});
const store = useStore();
const isVIP = computed(() => {
  return store.getters.user.userInfo.isVIP;
});
const popArrDX5 = ref([]);
const selecttextDX5 = ref([]);
const isSelected = ref(false);

const tipsData = ref({
  isShowIcon: true,
  tipsList: [],
  portDescription: '',
});
const yearLineReqData = ref({
  collegeCode: '',
  pid: '',
});
const selecttextDX6 = ref('');
const selecttextDX7 = ref('');
const selecttextDX8 = ref('');
const yearLineReqData2 = ref({
  pid: store.getters.user.userInfo.pid || '',
  collegeCode: '',
  year: '',
  course: '',
  batch: '',
});
const majorLoading = ref(false);
const allYearData = ref([]);
const popArrDX6 = ref([]);
const popArrDX7 = ref([]);
const popArrDX8 = ref([]);

const fetchNoteDesc = () => {
  // 获取分数线描述信息
  noteDesc({
    type: 'collegePlanDescription',
    pid: store.getters.user.userInfo.pid,
  }).then((res) => {
    tipsData.value.portDescription = res.data.data.collegePlanDescription;
  });
};
fetchNoteDesc();
const fetchSchoolScorelineFilter = () => {
  getSchoolScorelineFilter({ pid: store.getters.user.userInfo.pid }).then(
    (res) => {
      if (res.data.code == 20000) {
        popArrDX6.value = [];
        popArrDX7.value = [];
        popArrDX8.value = [];
        allYearData.value = res.data.data.years;
        res.data.data.years.forEach((item) => {
          popArrDX6.value.push(item.year);
        });
        popArrDX7.value = res.data.data.years[0].course;
        popArrDX8.value = res.data.data.years[0].batch;
        // this.getSchoolPlan()
        selecttextDX6.value = popArrDX6.value[0] || '';
        selecttextDX7.value = popArrDX7.value[0] || '';
        selecttextDX8.value = popArrDX8.value[0] || '';
        // 专业分数线
        fetchSchoolScoreline();
      }
    },
  );
};
const isChecked = ref(false);
const planList = ref([]);
const yearChange = (val) => {
  selecttextDX6.value = val;
  fetchSchoolScoreline();
};
const subjectChange = (val) => {
  selecttextDX7.value = val;
  fetchSchoolScoreline();
};
const levelChange = (val) => {
  selecttextDX8.value = val;
  fetchSchoolScoreline();
};
const fetchSchoolScoreline = () => {
  majorLoading.value = true;
  yearLineReqData2.value.year = selecttextDX6.value;
  yearLineReqData2.value.course = selecttextDX7.value;
  yearLineReqData2.value.batch = selecttextDX8.value;
  getSchoolScoreline(yearLineReqData2.value)
    .then((res) => {
      if (res.data.code == 20000) {
        planList.value = res.data.data;
        majorLoading.value = false;
      } else {
        majorLoading.value = false;
      }
    })
    .catch(() => {
      majorLoading.value = false;
    });
};
const handlComparison = () => {
  if (isChecked.value) {
    ElMessage.error('该院校已加入对比');
  } else {
    isSelected.value = true;
    reqLikeData.value.targetid = collegeInfo.value.code;
    fetchLikeSave();
  }
};
const reqLikeData = ref({
  targetid: '',
  type: 'compare',
});
const fetchLikeSave = () => {
  getLikeSave(reqLikeData.value).then((res) => {
    if (res.data.code == 20000) {
      isChecked.value = true;
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
    }
  });
};
const fetchSchoolYearline = () => {
  tableLoading.value = true;
  getSchoolYearline(yearLineReqData.value)
    .then((res) => {
      if (res.data.code == 20000) {
        popArrDX5.value = [];
        res.data.data.forEach((item) => {
          let arr = [];
          item.courses.forEach((item2) => {
            arr.push(item2.name);
          });
          popArrDX5.value.push(arr);
          selecttextDX5.value.push(arr[0]);
        });
        yearLineTableData.value = res.data.data;
        tableLoading.value = false;
      } else {
        tableLoading.value = false;
      }
    })
    .catch(() => {
      tableLoading.value = false;
    });
};
const categories = ref('');
const fetchSchoolHome = (pid) => {
  getSchoolHome({ code: pid }).then((res) => {
    if (res.data.code == 20000) {
      collegeInfo.value = res.data.data;
      categories.value = res.data.data.categories[0];
      fetchLikeList();
    }
  });
};
const searchData = ref({
  page: 1,
  pageSize: 9999,
  search: '',
});
const handleInputChange = _.debounce((val) => {
  searchData.value.search = val;
  if (searchData.value.search.length >= 2) {
    fetchSearchSchool();
  } else {
    ElMessage.error('院校名称不能少于两个字');
    return;
  }
}, 500);
const collegeSearchData = ref([]);
const fetchSearchSchool = () => {
  getSearchSchool(searchData.value).then((res) => {
    if (res.data.code == 20000) {
      collegeSearchData.value = res.data.data;
      if (collegeSearchData.value.length) {
        popperVis.value = true;
      } else {
        popperVis.value = false;
      }
    }
  });
};

const handleChecked = (item) => {
  isShow.value = false;
  yearLineReqData.value.collegeCode = item.code;
  yearLineReqData2.value.collegeCode = item.code;
  yearLineReqData.value.pid = store.getters.user.userInfo.pid;
  nextTick(() => {
    fetchSchoolYearline();
    fetchSchoolScorelineFilter();
    fetchSchoolHome(yearLineReqData.value.collegeCode);
  });
};
// 对比列表
const compareDetail = ref([]);
const fetchLikeList = () => {
  let reqData = {
    detail: '1',
    type: 'compare',
  };
  getLikeList(reqData).then((res) => {
    if (res.data.code == 20000) {
      compareDetail.value = res.data.data.compareDetail;
      let index = res.data.data.compareDetail.findIndex(
        (item) => item.code === collegeInfo.value.code,
      );
      if (index != -1) {
        isSelected.value = true;
        isChecked.value = true;
      }
    }
  });
};
const handleBlur = () => {
  popperVis.value = false;
};
const handleFocus = () => {
  if (searchData.value.search.length >= 2) {
    popperVis.value = true;
  }
};
</script>

<style lang="scss" scoped>
#scoreLine {
  padding-bottom: 150px;

  .content {
    margin-top: 20px;

    img {
      width: 100%;
    }
  }
}

:deep(.el-input-group__append) {
  width: 70px;
  background: var(--background-color);
  color: #fff;
}

.popper-box {
  padding: 5px 10px;
  width: 100%;
  max-height: 300px;

  // border-bottom: 1px dotted rgb(204, 204, 204);
  .title-box {
    padding: 10px;
    justify-content: space-between;
    border-bottom: 1px dotted rgb(204, 204, 204);

    .college-code {
      border-radius: 4px;
      padding: 0 2px;
      max-width: 100%;
      white-space: normal;
      height: auto;
      line-height: 20px;
      background-color: #409eff;
      color: #fff;
      margin-right: 5px;
    }

    .check-btn {
      padding: 4px 15px;
      background-color: #ff6700;
      border-color: #ff6700;
      color: #fff;
      border-radius: 3px;
    }

    &:hover {
      background: #f3f6f9;
    }
  }
}

.img-box {
  width: 72px;

  img {
    width: 72px;
    height: 72px;
  }

  margin-right: 20px;
}

.my-btn {
  width: 80px;
  border-radius: 4px;
  justify-content: center;
  color: var(--color-text);
  border: 1px solid var(--color-text);

  &:hover {
    background: var(--color-text);
    color: #fff;
  }
}
</style>
<style>
.popoverStyle {
  width: 1200px !important;
  padding: 0 0 !important;
}

.isActive {
  background: var(--color-text);
  color: #fff;
}
</style>
